HTML

Avant tout : Ce petit tuto s'adresse aux personnes n'ayant aucune notions en html !

1) Le HTML ?? KesaKo ???

Qu'est-ce que le HTML ? Et bien le HTML (Hypertext Markup Language) est un language qui compose toutes les pages du web ! L'ancetre du HTML est le SGML, et c'est de ce lanuage tres complexe que sont issus le HTML et le XML.
Le HTML est un language accecible a tous ! Vous pouvez créer des pages HTML avec n'importe quel editeur de texte (notepad, ...etc.).
Un point tres important : le HTML est composée de balises, c'est a dire de code encadré de <>. Voyez ces balise comme des instructions que votre explorateur ce doit d'executer.
Il existe 2 types de balises en html :
- les balises solitaires (comme qui permet de sauter une ligne)
- Et les balises ouvrantes/fermantes (exemple : <title>le titre de ma page</title>)

2) Apres la theorie, la PRATIQUE !!

Toutes les pages html se construisent selon ce shema :

< HTML>

</HTML>

- Entre les balises <HTML> et </HTML> vous allons avoir tout le code de notre page.
- Les balises <HEAD></HEAD> Contiendrons toutes les "meta-informations" (Informations non-visibles par l'utilisateur) ainsi que le titre de la page
- Les balises <BODY> et </BODY> contiendrons tout le corps de votre page web (texte, etc...)

Nous allons maintenant créer une page simplisime qui vous presentera :

<HTML>

<HEAD>
< title>Bonjour a tout le monde</title>
< /HEAD>
< BODY>
bonjour ! je m'apelle mickael et j'ai 15 ans !!
< /BODY>

</HTML>

- Comme vous pouvez le voir, les balises <title> et </title> contienent le titre de la page

Maintenant que vous avez compris la logique du html, je vais vous presenter quelques balises basiques !

3) Alice au pays des balises...

Votre curiositée vous a joué des tours!! Vous avez suivis le lapin dans le trou de la connaisance, et vous etes perdu dans le vaste monde des balises...
Je vais devenir votre guide ! Mais commeçons par le plus simple : Changer taille, ploice, couleur...etc. d'un texte.
Reprenons notre page de présentation :

<HTML>

<HEAD>
< title>Bonjour a tout le monde</title>
< /HEAD>
< BODY>
 bonjour ! je m'apelle mickael et j'ai 15 ans !!
< /BODY>

</HTML>

- Comme vous pouvez le voir, j'ai rajouté les balises , qui definise comment vas etre le texte qui sera encardé par ces balises.
+ size : defini la taille du texte (doit entre une valeur absloue 1, 2, 3...etc Ou relative +1, -3, +5 ...etc.)
+ face : defini le type de police du texte, si la première n'existe pas sur le PC de l'utilisateur (ici Arial), on passe a la suivante, et rebelote ... Si aucune des polices n'est trouvée, une police par defaut est choisie.
+ color : defini comme vous auriez pus vous en douter la couleur ;-)

Je vais maintenant vous aprendre a faire une liste a puce : reprenons notre exemple de tout a l'heure ...

<HTML>

<HEAD>
< title>Bonjour a tout le monde</title>
< /HEAD>
< BODY>

bonjour !
< LI> je m'apelle mickael</LI>
< LI>j'ai 15 ans !!</LI>
< LI>Et j'aime les patates !</LI>

< /BODY>

</HTML>

- Vous pouvez voir que certaines parties du texte sont encadrés par les balises <LI></LI> .Et bien à chaque balise LI, sa puce ! Ce qui donera :

bonjour !
< LI> je m'apelle mickael</LI>
< LI>j'ai 15 ans !!</LI>
< LI>Et j'aime les patates !</LI>

Maintenant je vais vous apprendre quelques chose de tres important : inserer des IMAGES !!!
Ceci est tres simple, la balise qui vous permet ceci est une petite balise solitaire qui se présente comme ceci :

La seul chose que je doit preciser, c'est que alt defini ou l'image sera alignée, et height/widht defini la taille de l'image.
Vous pouvez donc deja créer une petite page de présentation bien sympatique :

<HTML>
< HEAD>
< title>Bonjour a tout le monde</title>
< /HEAD>
< BODY>

bonjour !!
< LI> je m'apelle mickael</LI>
< LI>j'ai 15 ans !!</LI>
< LI>Et j'aime les patates !</LI>
Et voici ma photo :
< img src="matete.jpg" width="100" height="100" alt="t'a vu ma tete !!!" align="bottom">

< /BODY>
< /HTML>

Maintenant je vais vous apprendre autre choses de tout aussi important : Les liens !
Vous pourrez donc créer un "systeme" de pages HTML liés grace à des liens hypertexte.
Voici les balises qui vous permetrons ceci :

<A HREF="Mapage2.html">Cliquez ici pour aller a la page 2!!</A>

Des que l'utilisateur cliquera sur "cliquez ici pour aller a la page 2", la page 2 "Mapage2.html" apparaitra !
Vous pouvez aussi faire de meme mais avec une image, en combinant les 2 balises ;-) ! Ce qui vas donner ceci !

--------------------------------------------------------------------------------

Voila, ce sera tout pour cette initiation au HTML !